<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
    <div
      class="max-w-6xl w-full bg-white rounded-2xl shadow-xl overflow-hidden"
    >
      <div class="flex flex-col lg:flex-row">
        <!-- 左侧介绍区域 -->
        <div
          class="lg:w-1/2 bg-gradient-to-br from-blue-600 to-blue-800 p-8 lg:p-12 text-white"
        >
          <div class="h-full flex flex-col justify-center">
            <h1 class="text-3xl lg:text-4xl font-bold mb-6">欢迎加入艾聘</h1>
            <p class="text-lg lg:text-xl mb-12 text-blue-100">
              AI
              驱动的新一代智能招聘平台，为您提供精准的职业机会和全方位的职业发展支持。
            </p>

            <div class="space-y-8">
              <div class="flex items-start">
                <div
                  class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"
                >
                  <i class="ri-brain-line text-2xl"></i>
                </div>
                <div>
                  <h3 class="text-xl font-semibold mb-2">智能职位匹配</h3>
                  <p class="text-blue-100">
                    基于您的技能和偏好，智能推荐最适合的职位
                  </p>
                </div>
              </div>

              <div class="flex items-start">
                <div
                  class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"
                >
                  <i class="ri-shield-check-line text-2xl"></i>
                </div>
                <div>
                  <h3 class="text-xl font-semibold mb-2">专业能力认证</h3>
                  <p class="text-blue-100">
                    全面展示您的专业能力，提升求职竞争力
                  </p>
                </div>
              </div>

              <div class="flex items-start">
                <div
                  class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"
                >
                  <i class="ri-line-chart-line text-2xl"></i>
                </div>
                <div>
                  <h3 class="text-xl font-semibold mb-2">职业发展规划</h3>
                  <p class="text-blue-100">
                    获取个性化的职业发展建议和学习资源
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧登录表单 -->
        <div class="lg:w-1/2 p-8 lg:p-12">
          <div class="max-w-md mx-auto">
            <!-- 用户类型切换 -->
            <div class="flex mb-8">
              <button
                @click="userType = 'candidate'"
                :class="[
                  'flex-1 py-3 px-4 text-center font-medium transition-colors',
                  userType === 'candidate'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200',
                ]"
                class="rounded-l-lg"
              >
                求职方
              </button>
              <button
                @click="userType = 'recruiter'"
                :class="[
                  'flex-1 py-3 px-4 text-center font-medium transition-colors',
                  userType === 'recruiter'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200',
                ]"
                class="rounded-r-lg"
              >
                招聘方
              </button>
            </div>

            <div class="mb-6">
              <p class="text-gray-600 text-sm">
                验证即登录，未注册将自动创建艾聘账号
              </p>
            </div>

            <!-- 登录表单 -->
            <form @submit.prevent="handleLogin" class="space-y-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2"
                  >手机号</label
                >
                <input
                  v-model="loginForm.phone"
                  type="tel"
                  required
                  maxlength="11"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="请输入手机号"
                />
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2"
                  >验证码</label
                >
                <div class="flex space-x-3">
                  <input
                    v-model="loginForm.code"
                    type="text"
                    required
                    maxlength="6"
                    class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="请输入验证码"
                  />
                  <button
                    type="button"
                    @click="sendCode"
                    :disabled="countdown > 0"
                    class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors whitespace-nowrap"
                  >
                    {{ countdown > 0 ? `${countdown}s` : "发送验证码" }}
                  </button>
                </div>
              </div>

              <button
                type="submit"
                :disabled="
                  authStore.isLoading || !loginForm.phone || !loginForm.code
                "
                class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors flex items-center justify-center"
              >
                <i
                  v-if="authStore.isLoading"
                  class="ri-loader-line animate-spin mr-2"
                ></i>
                {{ authStore.isLoading ? "登录中..." : "登录" }}
              </button>
            </form>

            <!-- 提示信息 -->
            <div class="mt-6 text-center">
              <p class="text-xs text-gray-500">
                登录即表示同意
                <a href="#" class="text-blue-600 hover:underline"
                  >《用户协议》</a
                >
                和
                <a href="#" class="text-blue-600 hover:underline"
                  >《隐私政策》</a
                >
              </p>
            </div>

            <!-- 演示提示 -->
            <div
              class="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg"
            >
              <div class="flex items-start">
                <i class="ri-information-line text-yellow-600 mr-2 mt-0.5"></i>
                <div class="text-sm text-yellow-800">
                  <p class="font-medium mb-1">演示提示</p>
                  <p>
                    验证码请输入：<span class="font-mono font-bold"
                      >123456</span
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "../stores/auth";
import requestSmsCode from "../api/sms";
import Quasar from "../utils/quasar";

const router = useRouter();
const authStore = useAuthStore();

// window.Quasar.Notify.create({
//    color: 'teal', message: 'Quasar is cool! Right?', position: 'top'
// })

const userType = ref<"candidate" | "recruiter">("candidate");
const countdown = ref(0);
let countdownTimer: number | null = null;

const loginForm = ref({
  phone: "",
  code: "",
});

const sendCode = () => {
  if (!loginForm.value.phone) {
    Quasar.Notify.create({
      color: "negative",
      message: "请先输入手机号!",
      position: "top",
    });
    return;
  }

  if (!/^1[3-9]\d{9}$/.test(loginForm.value.phone)) {
    Quasar.Notify.create({
      color: "negative",
      message: "请输入正确的手机号!",
      position: "top",
    });
    return;
  }

  // 模拟发送验证码
  countdown.value = 60;
  countdownTimer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(countdownTimer!);
      countdownTimer = null;
    }
  }, 1000);
  requestSmsCode(loginForm.value.phone);
};

const handleLogin = async () => {
  if (!loginForm.value.phone || !loginForm.value.code) {
    Quasar.Notify.create({
      color: "negative",
      message: "请填写完整信息!",
      position: "top",
    });
    return;
  }

  if (!/^1[3-9]\d{9}$/.test(loginForm.value.phone)) {
    Quasar.Notify.create({
      color: "negative",
      message: "请输入正确的手机号!",
      position: "top",
    });
    return;
  }

  const result = await authStore.login({
    phone: loginForm.value.phone,
    code: loginForm.value.code,
    userType: userType.value,
  });

  if (result.success) {
    Quasar.Notify.create({
      color: "teal",
      message: "成功",
      position: "top",
    });

    // 根据用户类型跳转到不同页面
    if (userType.value === "recruiter") {
      router.push("/talent");
    } else {
      router.push("/jobs");
    }
  } else {
    Quasar.Notify.create({
      color: "negative",
      message: result.message || "登录失败",
      position: "top",
    });
  }
};

onMounted(() => {
  // 初始化认证状态
  authStore.initAuth();
});

onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
});
</script>
